<html>
	<head>
		<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/jquery-ui.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/jquery.cookie.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/checkers.js"></script>
		<link href="checkers.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			$(document).ready(function(){
				initialize();
			});
		</script>
	</head>
	<body>
		<div id="modal"></div>
		<div id="endgame_message"></div>
		<div id="leave_room">
			<p>Click anywhere in the screen to return to the game selection.</p>
		</div>
	
		<div id="top">
			<img src="images/checkers/logo.png" class="left_aligned" alt="Checkers" />
			<div id="facebook_likes">
				<div id="facebook_likes_text1">5530 pessoas curtiram</div>
				<div id="facebook_likes_text2">curta vc tbm!</div>
			</div>
		</div>
		
		<div id="content">
			<div id="player_white_rectangle" class="pwr_inactive">
				<img id="facebook_picture_white" src="images/checkers/user_picture.gif" width="44" height="44" alt="Player white" />
				<h3 id="facebook_username_white">Player's name</h3>
				<p><span id="white_number_pieces">12</span> pieces</p>
				<p><span id="white_number_kings">0</span> pieces are kinged</p>
			</div>
			
			<div id="board_support">
				<div id="board">
					<div id="line:0">
						<div id="square:0:0" class="board_square"></div>
						<div id="square:0:2" class="board_square bs_left_marged"></div>
						<div id="square:0:4" class="board_square bs_left_marged"></div>
						<div id="square:0:6" class="board_square bs_left_marged"></div>
					</div>
					
					<div id="line:1">
						<div id="square:1:1" class="board_square bs_left_marged"></div>
						<div id="square:1:3" class="board_square bs_left_marged"></div>
						<div id="square:1:5" class="board_square bs_left_marged"></div>
						<div id="square:1:7" class="board_square bs_left_marged"></div>
					</div>
					
					<div id="line:2">
						<div id="square:2:0" class="board_square"></div>
						<div id="square:2:2" class="board_square bs_left_marged"></div>
						<div id="square:2:4" class="board_square bs_left_marged"></div>
						<div id="square:2:6" class="board_square bs_left_marged"></div>
					</div>
					
					<div id="line:3">
						<div id="square:3:1" class="board_square bs_left_marged"></div>
						<div id="square:3:3" class="board_square bs_left_marged"></div>
						<div id="square:3:5" class="board_square bs_left_marged"></div>
						<div id="square:3:7" class="board_square bs_left_marged"></div>
					</div>
					
					<div id="line:4">
						<div id="square:4:0" class="board_square"></div>
						<div id="square:4:2" class="board_square bs_left_marged"></div>
						<div id="square:4:4" class="board_square bs_left_marged"></div>
						<div id="square:4:6" class="board_square bs_left_marged"></div>
					</div>
					
					<div id="line:5">
						<div id="square:5:1" class="board_square bs_left_marged"></div>
						<div id="square:5:3" class="board_square bs_left_marged"></div>
						<div id="square:5:5" class="board_square bs_left_marged"></div>
						<div id="square:5:7" class="board_square bs_left_marged"></div>
					</div>
					
					<div id="line:6">
						<div id="square:6:0" class="board_square"></div>
						<div id="square:6:2" class="board_square bs_left_marged"></div>
						<div id="square:6:4" class="board_square bs_left_marged"></div>
						<div id="square:6:6" class="board_square bs_left_marged"></div>
					</div>
					
					<div id="line:7">
						<div id="square:7:1" class="board_square bs_left_marged"></div>
						<div id="square:7:3" class="board_square bs_left_marged"></div>
						<div id="square:7:5" class="board_square bs_left_marged"></div>
						<div id="square:7:7" class="board_square bs_left_marged"></div>
					</div>
				</div>
			</div>
			
			<div id="player_black_rectangle" class="pbr_inactive">
				<img id="facebook_picture_black" src="images/checkers/user_picture.gif" width="44" height="44" alt="Player black" />
				<h3 id="facebook_username_black">Player's name</h3>
				<p><span id="black_number_pieces">12</span> pieces</p>
				<p><span id="black_number_kings">0</span> pieces are kinged</p>
			</div>
		</div>
		
		<div id="chat">
			<div id="chat_title_bar">
				<div id="chat_title">
					<img src="images/checkers/contract.png" alt="minimize" />
					<h3>Chat</h3>
				</div>
				<img id="chat_move_icon" src="images/checkers/move.png" draggable="true" alt="move chat window" />
			</div>
			<div id="chat_content"></div>
			<input id="chat_send" type="text" />
		</div>
		
		<div id="bottom_illustration"></div>
	</body>
</html>